<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>个人中心</title>

	</head>
	<body>
		<jsp:include page="/incloud/header.jsp" />

		<div class="d-flex align-items-stretch">
			<!-- Sidebar Navigation-->
			<jsp:include page="/incloud/sidebar.jsp" />
			<!-- Sidebar Navigation end-->
			<div class="page-content">
				<div class="page-header">
					<div class="container-fluid">
						<h2 class="h5 no-margin-bottom">个人中心</h2>
					</div>
				</div>
				<section class="no-padding-bottom">
					<!-- Form Elements -->
					<div class="col-lg-12">
						<div class="block">
							<div class="title"><strong>我的头像</strong></div>
							<div class="avatar"><img src="${loginUser.pic}" id="pic" alt="加载中..." style="width: 150px;height: 150px"
								 class="img-thumbnail rounded-circle"></div>
							<div style="margin-top: 15px" class="text-left">
								<!-- 真正的文件上传表单 -->
								<input name="pic" type="file" id="picFile" style="display: none" />
							</div>
							<div class="title">
								<br>
								<p class="h5"><strong>关注数：</strong><span>&nbsp;</span><span>&nbsp;</span><span>${focusCount}</span></p>
								<br>
								<p class="h5"><strong>被看数：</strong><span>&nbsp;</span><span>&nbsp;</span><span>${loginUser.look}</span></p>
								<br>
							</div>
							<div class="title"><strong>我的数据</strong></div>
							<div class="block-body">

								<form class="form-horizontal" method="post" action="/user/update">
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">真实姓名</label>
										<div class="col-sm-9">
											<input type="text" name="realName" value="${loginUser.realName}" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">所属部门</label>
										<div class="col-sm-9">
											<select class="selectpicker" data-live-search="true" id="deptList" name="deptId">
<%--												<option>研发部</option>--%>
<%--												<option>销售部</option>--%>
<%--												<option>行政部</option>--%>
<%--												<option>财务部</option>--%>
<%--												<option>总裁办公室</option>--%>
											</select>
										</div>
										<input type="hidden" name="deptName" id="deptName">
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">电话</label>
										<div class="col-sm-9">
											<input type="text" value="${loginUser.phone}" name="phone" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">年龄</label>
										<div class="col-sm-9">
											<input type="text" placeholder="请输入年龄" value="${loginUser.age}" name="age" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">个人信息</label>
										<div class="col-sm-9">
											<textarea placeholder="请输入个人信息" name="info"
													  class="form-control">${loginUser.info}</textarea>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">性别 </label>
										<div class="col-sm-9">

											<div class="i-checks">
												<input id="radioCustom1" ${loginUser.gender==1?'checked':''} type="radio" value="1" name="gender" class="radio-template">
												<label for="radioCustom1">男</label>
												<span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
												<input id="radioCustom2" ${loginUser.gender==0?'checked':''} type="radio" value="0" name="gender" class="radio-template">
												<label for="radioCustom2">女</label>
											</div>
										</div>


									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">注册时间</label>
										<div class="col-sm-9">
											<input type="text" disabled="" placeholder="${loginUser.registerTime}" class="form-control">
										</div>
									</div>
									<div class="line"></div>
									<div class="form-group row">
										<label class="col-sm-3 form-control-label">登录时间</label>
										<div class="col-sm-9">
											<input type="text" disabled="" placeholder="${loginUser.loginTime}" class="form-control">
										</div>
									</div>
									<div class="line"></div>

									<div class="form-group row">
										<label class="col-sm-3 form-control-label">是否私密 <br><small class="text-primary">默认为否，可以不设置</small></label>
										<div class="col-sm-9">
											<div class="i-checks">
												<input id="checkboxCustom1" name="isSecret" ${loginUser.isSecret==0?'checked':''} type="checkbox" value="0" class="checkbox-template">
												<label for="checkboxCustom1">是否私密</label>
											</div>

										</div>


									</div>
									<div class="line"></div>
									<div class="text-center">
										<input type="submit" class="btn btn-primary" value="保存">
									</div>
								</form>
							</div>
						</div>
					</div>
				</section>

				<jsp:include page="/incloud/footer.jsp" />
			</div>
		</div>


	</body>
</html>
<script>


	$("#deptList").change(function (){

		$("#deptName").val($(this).find("option:selected").html())
	})


   $(function () {
	   $.get("/dept/findAll",function (deptList){

		   let contentHtml = "";

		   for(let dept of deptList){

			   if('${loginUser.deptId}'==dept.id){
				   contentHtml+="<option value='"+dept.id+"' selected>"+dept.name+"</option>"
			   }else {
				   contentHtml+="<option value='"+dept.id+"' >"+dept.name+"</option>"
			   }

		   }

		   $("#deptList").html(contentHtml);

		   $("#deptList").selectpicker('refresh');

	   })

       $("#pic").click(function () {

           $("#picFile").click();

       })

	   $("#picFile").change(function (){

		   

		   //构建一个虚拟表单
		   let formData=new FormData();
		   formData.append("pic",document.getElementById("picFile").files[0])


		   //1.必须要是post提交
		   //2.请求要为MIME类型要为：multipart/form-data
		   $.ajax({
			   url:"/user/fileUpload",
			   type:"post",
			   data:formData,
			   contentType:false,
			   processData:false,
			   async:true,
			   success:function (newURL) {
				   layer.msg('上传成功');

				   //置空这个文件选择框
				   $("#picFile").val('')

				   $("#pic").attr('src',newURL)
			   },
			   error:function () {
				   layer.msg('服务器忙');

			   }


		   })
	   })



   })
</script>
